<template>
  <div class="illnessReport-manager">
    <Header title="参会报名审核">
      <van-tabs v-model="activeExamie" @change="examieChange">
        <van-tab name="0" title="待审批信息"></van-tab>
        <van-tab name="3" title="已审信息"></van-tab>
        <van-tab name="-1" title="未申报信息"></van-tab>
      </van-tabs>
      <van-tabs v-model="activeChlx" @change="chlxChange">
        <!--        <van-tab name="1" title="参赛选手"></van-tab>-->
        <van-tab name="2" title="参会人员"></van-tab>
      </van-tabs>
    </Header>
    <div class="wrapper">

      <van-list v-model="loading" :offest="300" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="(item,index) in list" :key="index">
          <template #title>
            <div class="examie-box">
              <div class="examie-title">
                <p class="xm">{{ item.xm }}</p>
                <div>
                  <van-tag v-if="item.shzt == '-1'" type="primary">未提交参会信息</van-tag>
                  <van-tag v-if="item.shzt == '0'" type="warning">待审核</van-tag>
                  <van-tag v-if="item.shzt == '1'" type="success">审核通过</van-tag>
                  <van-tag v-if="item.shzt == '2'" type="danger">审核不通过</van-tag>
                </div>
              </div>
              <div>
                <div class="lable-item">
                  <p><span class="label">人员类别：</span>{{ formart(item.chlx) }}</p>
                </div>
                <div class="lable-item">
                  <p v-if="activeChlx == '1'"><span class="label">项目名称:</span>{{ item.xmmc }}</p>
                  <p v-else><span class="label">单位：</span>{{ item.dw }}</p>
                </div>
                <div class="lable-item">
                  <p><span class="label">手机号码：</span>{{ item.tel }}</p>
                </div>
                <div class="lable-item">
                  <p><span class="label">身份证：</span>{{ item.idcard | fkIdCard }}</p>
                </div>
                <div class="lable-item" v-if="item.shzt == '2'">
                  <p style="color: red">审核不通过原因：{{ item.shyy }}</p>
                </div>
              </div>
            </div>
            <div class="func-btn">
              <template v-if="isShowBtn">
                <van-button round type="primary" size="small" class="btn" @click="pass(item)"
                            v-if="activeExamie == '0'">
                  通过
                </van-button>

                <van-button round type="danger" size="small" class="btn" @click="noPass(item)"
                            v-if="activeExamie == '0'">
                  不通过
                </van-button>
                <van-button round type="danger" size="small" class="btn" @click="rollback(item)"
                            v-if="activeExamie == '3'">撤回
                </van-button>
              </template>
              <van-button round type="info" size="small" class="btn" @click="getDetail(item)">
                查看详情
              </van-button>
            </div>

          </template>
          <template></template>
        </van-cell>
      </van-list>
      <van-dialog v-model="dialogShow" :show-cancel-button="true" :before-close="beforeClose">
        <div class="dialog-box">
          <span class="dialog-header">不通过原因</span>
          <van-field
            v-model="shyy"
            placeholder="请输入不通过原因"
            clearable
            autosize
            type="textarea"
            rows="1"
            maxlength="230"
            show-word-limit
          />
        </div>
      </van-dialog>
    </div>
  </div>
</template>
<script>
import { loadMemberData } from 'api/personManager'
import { getSelfInfo } from '@/utils/tokenUtil'
import { chlxArray } from '@/utils/code'
import { getRealArrData } from '@/utils/'
import { doSh } from '@/api/shenhe'
import { desensitizedZjhm } from '@/utils/desensitized'
import { revokeDoctorUser } from 'api/userInfo'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'ExamieManager',
  data() {
    return {
      list: [],
      loading: true,
      finished: false,
      pageSize: 15,
      pageNo: 1,
      xm: '',
      totalCount: 0,
      activeExamie: '0',
      activeChlx: '2',
      examieArr: ['0'],
      chlxArr: [],
      fchlxArr: [],
      dialogShow: false,
      shyy: '',
      shData: {},
      rylbArr: [],
      selfUserInfo: {}
    }
  },
  created() {
    let arr = chlxArray[0].child
    let chlxArr = [],
      fchlxArr = []
    arr.slice(0, 3).forEach(item => chlxArr.push(item.key.toString()))
    arr.slice(3, arr.length).forEach(item => fchlxArr.push(item.key.toString()))
    this.chlxArr = chlxArr
    this.fchlxArr = fchlxArr
    this.rylbArr = getRealArrData(chlxArray, 'child')
    this.selfUserInfo = getSelfInfo()
  },
  mounted() {
    this.getBtnStatusAsync()
    this.loadPersonsManager()
  },
  computed: {
    ...mapState(['isShowBtn']),
    formart() {
      return function(val) {
        return this.rylbArr.filter(item => item.key == val)[0].value
      }
    }
  },
  filters: {
    fkIdCard(val) {
      return desensitizedZjhm(val)
    }
  },
  methods: {
    ...mapActions(['getBtnStatusAsync']),
    getDetail(item) {
      this.$router.push({ name: 'UserInfoDetail', query: { id: item.id } })
    },
    rollback(item) {
      revokeDoctorUser({
        id: item.id,
        zae011: this.selfUserInfo.id,
        zae019: this.selfUserInfo.xm
      }).then(res => {
        this.$dialog.alert({
          message: '退回成功'
        }).then(() => {
          this.pageNo = 1
          this.list = []
          this.loadPersonsManager()
        })

      })
    },
    beforeClose(action, done) {
      // 点击事件 - 备注按钮提示框
      if (action === 'confirm') {
        this.examieHandle(2)
        done() // 关闭提示框
      } else if (action === 'cancel') {
        done() // 关闭提示框
      }
    },
    pass(item) {
      this.shData = item
      this.$dialog.confirm({
        message: '是否确认操作审批通过？'
      }).then(() => {
        this.examieHandle('1')
      })

    },
    noPass(item) {
      this.shData = item
      this.dialogShow = true
    },
    examieHandle(shzt) {
      let self = this.selfUserInfo
      let shData = this.shData
      let that = this
      doSh(shData.id, self.id, self.xm, shData.chlx, shData.tdbh, shzt, that.shyy)
        .then(res => {

          this.$dialog.alert({
            message: '操作成功'
          })
          this.pageNo = 1
          this.list = []
          this.loadPersonsManager()

        })
    },
    examieChange(name) {
      if (name == '3') {
        this.examieArr = ['1', '2']
      } else {
        this.examieArr = [name]
      }
      this.pageNo = 1
      this.list = []
      this.loadPersonsManager()
    },
    chlxChange(name) {
      this.pageNo = 1
      this.list = []
      this.loadPersonsManager()
    },
    onLoad() {
      if (this.list.length < this.totalCount) {
        this.loadPersonsManager()
      } else {
        this.finished = true
      }
    },
    loadPersonsManager() {
      let self = this.selfUserInfo
      let that = this
      let otherParam = {
        shztArry: that.examieArr,
        pageNo: that.pageNo,
        pageSize: that.pageSize
      }
      if (self.hasOwnProperty('permission') && self.permission.BSTVIEWPERMIS == 'true') {
        let chlxArry = self.permission.PERMISSION.split(',')
        otherParam.chlxArry = chlxArry
      } else {
        otherParam.tdbh = self.tdbh
        otherParam.chlxArry = that.activeChlx == '1' ? that.chlxArr : that.fchlxArr
      }
      loadMemberData(otherParam)
        .then(res => {
          let data = JSON.parse(res.data)
          that.pageNo = that.pageNo + 1
          let resultList = [...data.list]
          if (that.list.length == 0) {
            that.list = resultList
          } else {
            that.list = that.list.concat(resultList)
          }
          that.totalCount = data.totalCount
          this.finished = false
          that.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>

.examie-box {
  .examie-title {
    display: flex;
    justify-content: space-between;

    .xm {
      font-size: 16px;
    }
  }

  .lable-item {
    font-size: 13px;
    color: #999999;

    .label {
      color: #666666;
    }
  }
}

.dialog-box {
  width: 100%;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .dialog-header {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    background-color: red;
  }
}
</style>
